<template>
  <div>
    <div>
      <p style="font-size: 13px; color: #00000080; font-weight: 300">
        图片要求：宽高等于800px，大小1M内。
      </p>
    </div>
    <el-upload
      list-type="picture-card"
      accept=".png, .jpeg, .jpg, .gif"
      :on-preview="handlePictureCardPreview"
      :on-success="onSuccess"
      :on-remove="handleRemove"
      :before-upload="handleBeforeUpload"
      :data="uploadData"
      :action="uploadImgUrl"
      :file-list="imgList"
      :limit="parseInt(this.size)"
      :on-change="handleChange"
      :class="{ hide: hideUploadCard }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      title="预览"
      width="800"
    >
      <el-image :src="dialogImageUrl"></el-image>
    </el-dialog>
  </div>
</template>


<script>
import { getUploadToken } from "@/api/monitor/file";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      uploadImgUrl: "https://upload-z2.qiniup.com",
      upload_domain: "",
      uploadData: { token: "", key: "" },
      hideUploadCard: false,
      body: true,
    };
  },
  props: {
    size: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    imageStr: {
      type: String,
      default: "",
    },
    imgStr: {
      type: String,
      default: "",
    },
  },
  computed: {
    // 按，分割的数组
    imgList() {
      if (this.imageStr == "" || this.imageStr == null) {
        let str = [];
        return str;
      }
      let img = this.imageStr.split(",").map((item, index) => {
        return { url: item, name: index };
      });
      return img;
    },
  },
  methods: {
    onSuccess(response, file, fileList) {
      file.url = this.upload_domain + response.key;
      // 拼接完成的值
      let str = [];
      fileList.map((item) => {
        str.push(item.url);
      });
      console.log(str.toString());
      this.$emit("update:imageStr", str.toString());
    },

    handleRemove(file, imgList) {
      if (this.imgList == null) {
        return;
      }
      this.hideUploadCard = imgList.length >= parseInt(this.size);
      let str = [];
      for (var i = 0; i < imgList.length; i++) {
        str.push(imgList[i].url);
      }
      this.$emit("update:imageStr", str.toString());
    },
    handlePictureCardPreview(file) {
      this.body = false;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange(file, imgList) {
      if (this.imgList == null) {
        return;
      }
      this.hideUploadCard = imgList.length >= parseInt(this.size); //通过change方法来改变hideUploadCard值
    },
    handleBeforeUpload() {
      let _self = this;
      return new Promise((resolve, reject) => {
        getUploadToken()
          .then((response) => {
            _self.uploadData.key = response.data.key;
            _self.uploadData.token = response.data.token;
            _self.upload_domain = response.data.domain;
            resolve(true);
          })
          .catch((err) => {
            console.log("出错了...", err);
            reject(false);
          });
      });
    },
    closes(done) {
      done();
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.imgList == null) {
      let str = [];
      return str;
    }
    this.hideUploadCard = this.imgList.length >= parseInt(this.size); //通过change方法来改变hideUploadCard值
  },
};
</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
/*去除upload组件过渡效果*/
.el-upload-list__item {
  transition: none !important;
}
</style>
